import React, { useState } from 'react';
import { Code, Play, Save, Download, Upload, FileText, Settings, Zap, Package } from 'lucide-react';
import MenuToggle from '../components/MenuToggle';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

const PluginDevelop = ({ toggleSidebar }) => {
  const [pluginName, setPluginName] = useState('');
  const [pluginVersion, setPluginVersion] = useState('1.0.0');
  const [pluginDescription, setPluginDescription] = useState('');
  const [pluginCode, setPluginCode] = useState(`// 插件主要代码
export default class MyPlugin {
  constructor() {
    this.name = 'MyPlugin';
    this.version = '1.0.0';
  }

  // 插件初始化
  init() {
    console.log('插件已初始化');
  }

  // 插件主要功能
  execute() {
    // 在这里实现插件功能
    return '插件执行成功';
  }

  // 插件销毁
  destroy() {
    console.log('插件已销毁');
  }
}`);

  const [manifestCode, setManifestCode] = useState(`{
  "name": "my-plugin",
  "version": "1.0.0",
  "description": "我的第一个插件",
  "author": "开发者",
  "main": "index.js",
  "permissions": [
    "storage",
    "network"
  ],
  "dependencies": {},
  "hooks": {
    "onLoad": "init",
    "onUnload": "destroy"
  }
}`);

  const [testResult, setTestResult] = useState(null);
  const [isBuilding, setIsBuilding] = useState(false);

  // 插件模板
  const templates = [
    {
      name: '基础插件模板',
      description: '包含基本插件结构的模板',
      category: 'basic'
    },
    {
      name: 'UI组件插件',
      description: '创建自定义UI组件的插件模板',
      category: 'ui'
    },
    {
      name: '数据处理插件',
      description: '用于数据处理和转换的插件模板',
      category: 'data'
    },
    {
      name: 'API集成插件',
      description: '集成外部API服务的插件模板',
      category: 'api'
    }
  ];

  const handleTestPlugin = () => {
    setTestResult({
      status: 'success',
      message: '插件测试通过',
      details: [
        '✓ 语法检查通过',
        '✓ 依赖检查通过',
        '✓ 权限验证通过',
        '✓ 功能测试通过'
      ]
    });
  };

  const handleBuildPlugin = () => {
    setIsBuilding(true);
    setTimeout(() => {
      setIsBuilding(false);
      // 模拟构建完成
    }, 2000);
  };

  const handleSavePlugin = () => {
    // 保存插件代码
    console.log('保存插件');
  };

  const handleExportPlugin = () => {
    // 导出插件包
    console.log('导出插件');
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
                  <Code className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    插件开发
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    创建和开发自定义插件
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" onClick={handleSavePlugin}>
                <Save className="w-4 h-4 mr-2" />
                保存
              </Button>
              
              <Button variant="outline" onClick={handleTestPlugin}>
                <Play className="w-4 h-4 mr-2" />
                测试
              </Button>

              <Button 
                variant="outline" 
                onClick={handleBuildPlugin}
                disabled={isBuilding}
              >
                {isBuilding ? (
                  <>
                    <div className="w-4 h-4 mr-2 border-2 border-current border-t-transparent rounded-full animate-spin" />
                    构建中
                  </>
                ) : (
                  <>
                    <Package className="w-4 h-4 mr-2" />
                    构建
                  </>
                )}
              </Button>

              <Button onClick={handleExportPlugin}>
                <Download className="w-4 h-4 mr-2" />
                导出
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* 左侧：模板和工具 */}
          <div className="lg:col-span-1 space-y-6">
            {/* 插件模板 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">插件模板</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {templates.map((template, index) => (
                  <button
                    key={index}
                    className="w-full text-left p-3 rounded-lg border border-material-grey-200 hover:border-primary/50 hover:bg-primary/5 transition-colors"
                  >
                    <div className="font-medium text-sm text-material-grey-900 mb-1">
                      {template.name}
                    </div>
                    <p className="text-xs text-material-grey-600">{template.description}</p>
                    <Badge variant="secondary" className="mt-2 text-xs">
                      {template.category}
                    </Badge>
                  </button>
                ))}
              </CardContent>
            </Card>

            {/* 开发工具 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">开发工具</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button variant="outline" className="w-full justify-start">
                  <FileText className="w-4 h-4 mr-2" />
                  API文档
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Settings className="w-4 h-4 mr-2" />
                  调试工具
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Zap className="w-4 h-4 mr-2" />
                  性能分析
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Upload className="w-4 h-4 mr-2" />
                  导入项目
                </Button>
              </CardContent>
            </Card>

            {/* 测试结果 */}
            {testResult && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">测试结果</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className={`p-3 rounded-lg ${
                    testResult.status === 'success' 
                      ? 'bg-green-50 border border-green-200' 
                      : 'bg-red-50 border border-red-200'
                  }`}>
                    <div className={`font-medium text-sm mb-2 ${
                      testResult.status === 'success' ? 'text-green-800' : 'text-red-800'
                    }`}>
                      {testResult.message}
                    </div>
                    <div className="space-y-1">
                      {testResult.details.map((detail, index) => (
                        <div key={index} className="text-xs text-material-grey-600">
                          {detail}
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>

          {/* 右侧：代码编辑器 */}
          <div className="lg:col-span-3 space-y-6">
            {/* 插件基本信息 */}
            <Card>
              <CardHeader>
                <CardTitle>插件信息</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="plugin-name">插件名称</Label>
                    <Input
                      id="plugin-name"
                      value={pluginName}
                      onChange={(e) => setPluginName(e.target.value)}
                      placeholder="请输入插件名称"
                    />
                  </div>
                  <div>
                    <Label htmlFor="plugin-version">版本号</Label>
                    <Input
                      id="plugin-version"
                      value={pluginVersion}
                      onChange={(e) => setPluginVersion(e.target.value)}
                      placeholder="1.0.0"
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="plugin-description">插件描述</Label>
                  <Textarea
                    id="plugin-description"
                    value={pluginDescription}
                    onChange={(e) => setPluginDescription(e.target.value)}
                    placeholder="请输入插件描述"
                    rows={3}
                  />
                </div>
              </CardContent>
            </Card>

            {/* 代码编辑器 */}
            <Card>
              <CardHeader>
                <CardTitle>代码编辑器</CardTitle>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue="main" className="w-full">
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="main">主要代码</TabsTrigger>
                    <TabsTrigger value="manifest">配置文件</TabsTrigger>
                    <TabsTrigger value="styles">样式文件</TabsTrigger>
                  </TabsList>

                  <TabsContent value="main" className="mt-4">
                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <Label>index.js</Label>
                        <div className="flex space-x-2">
                          <Select defaultValue="javascript">
                            <SelectTrigger className="w-32">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="javascript">JavaScript</SelectItem>
                              <SelectItem value="typescript">TypeScript</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <Textarea
                        value={pluginCode}
                        onChange={(e) => setPluginCode(e.target.value)}
                        rows={20}
                        className="font-mono text-sm"
                        placeholder="请输入插件代码"
                      />
                    </div>
                  </TabsContent>

                  <TabsContent value="manifest" className="mt-4">
                    <div className="space-y-3">
                      <Label>manifest.json</Label>
                      <Textarea
                        value={manifestCode}
                        onChange={(e) => setManifestCode(e.target.value)}
                        rows={20}
                        className="font-mono text-sm"
                        placeholder="请输入配置文件内容"
                      />
                    </div>
                  </TabsContent>

                  <TabsContent value="styles" className="mt-4">
                    <div className="space-y-3">
                      <Label>styles.css</Label>
                      <Textarea
                        rows={20}
                        className="font-mono text-sm"
                        placeholder="请输入样式代码"
                      />
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </>
  );
};

export default PluginDevelop;
